<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="/css/eui.css">
    <script src="/js/vue.min.js"></script>
    <!-- import JavaScript -->
    <script src="/js/eui.js"></script>
    <script src="/js/axios.min.js"></script>
    <style>

        .el-aside {
            color: #333;
        }
        h1{
            float: left;
            font-size: 22px;
            color: white;
            margin: 0;
        }
        .el-header{
            background-color: #820C0C;
            color: #333;
            line-height: 60px; /*实现垂直居中效果*/
        }
        .welcome{
            color: white;
            font-size: 14px;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container style="height: 500px; border: 1px solid #eee">
        <el-header style="text-align: right; font-size: 12px">
            <h1>珠宝商城后台管理系统</h1>

            <span class="welcome">欢迎{{user.nick}}回来!</span>
            <a href="javascript:void(0)" @click="logout()">退出登录</a>
        </el-header>

        <el-container>
            <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
                <el-menu  @select="menuChange">
                    <el-submenu index="1">
                        <template slot="title"><i class="el-icon-s-flag"></i>分类管理</template>
                        <el-menu-item index="1-1">分类列表</el-menu-item>
                        <el-menu-item index="1-2">添加分类</el-menu-item>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title"><i class="el-icon-picture"></i>轮播图管理</template>
                        <el-menu-item index="2-1">轮播图列表</el-menu-item>
                        <el-menu-item index="2-2">添加轮播图</el-menu-item>
                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title"><i class="el-icon-shopping-cart-2"></i>商品管理</template>
                        <el-menu-item index="3-1">商品列表</el-menu-item>
                        <el-menu-item index="3-2">添加商品</el-menu-item>
                    </el-submenu>
                    <el-submenu index="4">
                        <template slot="title"><i class="el-icon-s-goods"></i>品牌管理</template>
                        <el-menu-item index="4-1">品牌列表</el-menu-item>
                        <el-menu-item index="4-2">品牌添加</el-menu-item>
                    </el-submenu>
                    <el-submenu index="5">
                        <template slot="title"><i class="el-icon-user"></i>用户管理</template>
                        <el-menu-item index="5-1">用户信息管理</el-menu-item>
                        <el-menu-item index="5-2">用户订单管理</el-menu-item>
                    </el-submenu>

                </el-menu>
            </el-aside>

            <el-main>
                <el-table v-show="index=='1-1'" :data="categoryArr">
                    <!--设置表格的第一列为编号/序号  label相当于表头-->
                    <el-table-column type="index" label="编号" width="80"></el-table-column>
                    <!--prop代表数组中对象的属性名-->
                    <el-table-column prop="categoryName" label="分类名称"></el-table-column>
                    <el-table-column label="启用/禁用">
                        <template slot-scope="scope">
                            <!-- 苹果开关 -->
                            <el-switch
                                    v-model="scope.row.enable"
                                    active-color="#13ce66"
                                    inactive-color="#ccc"
                                    :active-value="1"
                                    :inactive-value="0"
                                    @change="changeCategorySwitchById(scope.row.id,scope.row.enable)"
                            >
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <!--scope对象中会装着当前遍历的信息-->
                        <template slot-scope="scope">
                            <!--气泡确认组件 scope.$index代表遍历对象在数组中的下标
                            scope.row代表当前遍历的分类对象-->
                            <el-popconfirm title="您确认删除此分类吗?" @confirm="categoryDelete(scope.row.id)">
                                <el-button size="mini" type="danger" slot="reference">删除</el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
                <!--轮播图-->
                <el-table v-show="index=='2-1'" :data="bannerArr">
                    <el-table-column type="index" label="编号" width="80"></el-table-column>
                    <el-table-column label="轮播图" width="240">
                        <!--template模板 scope里面装着遍历的对象-->
                        <template slot-scope="scope">
                            <!--scope.row得到当前遍历的对象-->
                            <img :src="scope.row.url" style="width: 150px" alt="">
                        </template>
                    </el-table-column>
                    <el-table-column label="轮播图名称" prop="bannerName" width="140"></el-table-column>
                    <el-table-column label="前台显示" width="240">
                        <template slot-scope="scope">
                            <!-- 苹果开关 -->
                            <el-switch
                                    v-model="scope.row.enable"
                                    active-color="#13ce66"
                                    inactive-color="#ccc"
                                    :active-value="1"
                                    :inactive-value="0"
                                    @change="changeBannerSwitchById(scope.row.id,scope.row.enable)"
                            >
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <!--scope对象中会装着当前遍历的信息-->
                        <template slot-scope="scope">
                            <!--气泡确认组件 scope.$index代表遍历对象在数组中的下标
                            scope.row代表当前遍历的分类对象-->
                            <el-popconfirm title="您确认删除此轮播图吗?" @confirm="bannerDelete(scope.row.id)">
                                <el-button size="mini" type="danger" slot="reference">删除</el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>

                </el-table>
                <el-table v-show="index=='3-1'" :data="productArr">
                    <el-table-column prop="id" label="id" width="50"></el-table-column>
                    <el-table-column prop="shortTitle" label="商品标题" width="300"></el-table-column>
                    <el-table-column prop="categoryName" label="分类名称" width="80"></el-table-column>
                    <el-table-column prop="brandName" label="品牌名称" width="100"></el-table-column>
                    <el-table-column prop="viewCount" label="浏览数量" width="100"></el-table-column>
                    <el-table-column prop="saleCount" label="销售数量" width="100"></el-table-column>
                    <el-table-column prop="stock" label="库存数量" width="100"></el-table-column>
                    <el-table-column label="显示商品" width="100">
                        <template slot-scope="scope">
                            <!-- 苹果开关 -->
                            <el-switch
                                    v-model="scope.row.productEnable"
                                    active-color="#13ce66"
                                    inactive-color="#ccc"
                                    :active-value="1"
                                    :inactive-value="0"
                                    @change="changeProductSwitchById(scope.row.id,scope.row.productEnable)"
                            >
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column prop="gmtCreated" label="商品添加时间" width="200"></el-table-column>
                    <el-table-column label="操作">
                        <!--scope对象中会装着当前遍历的信息-->
                        <template slot-scope="scope">
                            <!--气泡确认组件 scope.$index代表遍历对象在数组中的下标
                            scope.row代表当前遍历的分类对象-->
                            <el-popconfirm title="您确认删除此商品吗?" @confirm="productDelete(scope.row.id)">
                                <el-button size="mini" type="danger" slot="reference">删除</el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
                <el-table v-show="index=='4-1'" :data="brandArr">
                    <!--设置表格的第一列为编号/序号  label相当于表头-->
                    <el-table-column type="index" label="编号" width="80"></el-table-column>
                    <!--prop代表数组中对象的属性名-->
                    <el-table-column prop="brandName" label="品牌名称"></el-table-column>
                    <el-table-column label="启用/禁用">
                        <template slot-scope="scope">
                            <!-- 苹果开关 -->
                            <el-switch
                                    v-model="scope.row.enable"
                                    active-color="#13ce66"
                                    inactive-color="#ccc"
                                    :active-value="1"
                                    :inactive-value="0"
                                    @change="changeBrandSwitchById(scope.row.id,scope.row.enable)"
                            >
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <!--scope对象中会装着当前遍历的信息-->
                        <template slot-scope="scope">
                            <!--气泡确认组件 scope.$index代表遍历对象在数组中的下标
                            scope.row代表当前遍历的分类对象-->
                            <el-popconfirm title="您确认删除此品牌吗?" @confirm="brandDelete(scope.row.id)">
                                <el-button size="mini" type="danger" slot="reference">删除</el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
                <el-table v-show="index=='5-1'" :data="userArr">
                    <!--设置表格的第一列为编号/序号  label相当于表头-->
                    <el-table-column type="index" label="编号" width="80"></el-table-column>
                    <!--prop代表数组中对象的属性名-->
                    <el-table-column prop="username" label="用户名" width="250"></el-table-column>
                    <el-table-column prop="nick" label="昵称" width="250"></el-table-column>
                    <el-table-column prop="phone" label="电话" width="150"></el-table-column>
                    <el-table-column prop="email" label="E-mail" width="250"></el-table-column>
                    <el-table-column prop="credits" label="积分" width="80"></el-table-column>
                    <el-table-column prop="gmtCreated" label="注册时间" width="200"></el-table-column>
                    <el-table-column label="启用/禁用">
                        <template slot-scope="scope">
                            <!-- 苹果开关 -->
                            <el-switch
                                    v-model="scope.row.enable"
                                    active-color="#13ce66"
                                    inactive-color="#ccc"
                                    :active-value="1"
                                    :inactive-value="0"
                                    @change="changeUserSwitchById(scope.row.id,scope.row.enable)"
                            >
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <!--scope对象中会装着当前遍历的信息-->
                        <template slot-scope="scope">
                            <el-button size="mini" type="danger" slot="reference" @click="showUserInfo(scope.row.id)">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>
        </el-container>
    </el-container>

    <!--抽屉组件开始
      direction:代表方向rtl(从右到左right to left) / ltr (左到右)/ ttb (上到下)/ btt(下到上)
      size:弹出内容占屏幕的百分比
      :visible.sync 让抽屉是否显示和一个变量进行绑定 true显示 false不显示
    -->
    <el-drawer title="添加分类" :visible.sync="drawerUser" direction="ttb" size="25%">
        <el-form>
            <el-form-item label="分类名称" label-width="80px">
                <el-input style="width: 500px" v-model="categoryName"></el-input>
                <el-button type="success" @click="addCategory">添加分类</el-button>
            </el-form-item>
        </el-form>
    </el-drawer>
    <el-drawer title="添加品牌" :visible.sync="drawerBrand" direction="ttb" size="25%">
        <el-form>
            <el-form-item label="品牌名称" label-width="80px">
                <el-input style="width: 500px" v-model="brandName"></el-input>
                <el-button type="success" @click="addBrand">添加品牌</el-button>
            </el-form-item>
        </el-form>
    </el-drawer>
    <el-drawer title="用户地址信息" :visible.sync="drawerUserAddress" direction="ttb" size="25%">
        <el-form>
            <el-table :data="userAddressArr">
                <el-table-column type="index" label="编号" width="80"></el-table-column>
                <el-table-column prop="contactName" label="联系人" width="200"></el-table-column>
                <el-table-column prop="phone" label="联系电话" width="300"></el-table-column>
                <el-table-column prop="address" label="联系地址"></el-table-column>
            </el-table>
        </el-form>
    </el-drawer>
    <!--抽屉组件结束-->

</div>
</body>
<script src="/js/admin.js"></script>
</html>